<!-- 对话框 -->
<template>
  <a-modal
    v-model:visible="visible"
    :title="title"
    :ok-button-props="okButtonProps"
    :cancel-button-props="cancelButtonProps"
    @ok="handleOk"
  >
    <a-form
      ref="modalFormRef"
      :model="modalForm"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
      autocomplete="off"
      :rules="rules"
    >
      <a-form-item v-for="item in modalItem" :key="item.name" :label="item.label" :name="item.name">
        <a-input v-if="item.type === 'input'" v-model:value="modalForm[item.name]" />
        <a-tree-select
          v-if="item.type === 'treeSelect'"
          v-model:value="modalForm[item.name]"
          :style="{ width: item?.width ? item.width : '200px' }"
          :tree-data="unref(item.treeData)"
          allow-clear
          tree-node-filter-prop="label"
          v-bind="item.otherOption"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, computed, getCurrentInstance, reactive, unref } from 'vue'
import { okButtonProps, cancelButtonProps } from '@/assets/js'
const { proxy } = getCurrentInstance()
const props = defineProps({
  modalVisible: {
    type: Boolean,
    default: false
  },
  form: {
    type: Object,
    default: () => {
      return {}
    }
  },
  title: {
    type: String,
    default: ''
  },
  modalItem: {
    type: Array,
    default: () => {
      return []
    }
  },
  rules: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const modalFormRef = ref()
const modalForm = computed(() => {
  return reactive(JSON.parse(JSON.stringify(proxy.form)))
})

const emit = defineEmits(['handle-cancel', 'handle-ok'])

const visible = computed({
  get() {
    return props.modalVisible
  },
  set() {
    //当对话框关闭 清除校验，同时触发事件
    modalFormRef.value.resetFields()
    emit('handle-cancel')
  }
})
const handleOk = () => {
  modalFormRef.value.validateFields().then(() => {
    // console.log(modalForm, 'modalForm')
    emit('handle-ok', unref(modalForm))
  })
}
</script>

<style lang="less" scoped></style>
